import React from 'react';
import { useRefetchableFragment } from 'react-relay/hooks';
import { IspCurrent$key } from "./__generated__/IspCurrent.graphql";

const graphql = require("babel-plugin-relay/macro");
const { useCallback, useState } = React;
//const {useRefetchableFragment} = require('react-relay');

interface Props {
    //IspCurrent$key类型定义必须和片段的指代名称保持一致；
    issue: IspCurrent$key;
}
export default function IspCurrent(props: Props) {
  // Track the current comment text - this is used as the value of the comment textarea
  const [commentText, setCommentText] = useState('');
  // const [isCommentPending, addComment] = useMutation(AddCommentMutation);
  //const [isClosePending, closeIssue] = useMutation(CloseIssueMutation);
  //const [isReopenPending, reopenIssue] = useMutation(ReopenIssueMutation);
  //const isPending =  isClosePending ;
    //数组片段fragment IspCurrent on User @relay(plural: true)但是不能配套@refetchable来做！
  // Get the data we need about the issue in order to execute the mutation. Right now that's just
  // the id, but in the future this component might neeed more information.
    const [data, refetch] = useRefetchableFragment(
        graphql`
            fragment IspCurrent on Report 
            @argumentDefinitions(
                isUsing: { type: "String", defaultValue: "7652" }
            )
            @refetchable(queryName: "CommentEnabledRefetchQuery") {
                filesCount(fromDate: $isUsing)
                upLoadDate type stm{id due}
            }
        `,
        props.issue,
    );
 //TODO： 遇到了数组形式，默认取第一条了？ rops.issue[0], ； 非数组的是 props.issue,
  if(!data){
     //关键的@refetchable filesCount（）都是针对的Report模型的查询的。若是Report为空，refetch还有什么意思！！
     //throw Error("@refetchable要求的数据为空");
  }
  const issueId = data?.id;      //非数组的是data.id;

  // Callback to handle edits to the comment text
  const onChange = useCallback(
    event => {
      setCommentText(event.target.value);
    },
    [setCommentText],
  );

  // Form submit callback
  const onSubmit = useCallback(
    event => {
      event.preventDefault();
      //  addComment(commentText, issueId);
      // Reset the comment text
      setCommentText('');
    },
    [commentText, setCommentText, issueId ],
  );

  // Reopen/Close the issue
  const onToggleOpen = useCallback(
    event => {
      event.preventDefault();
      // Switch mutation based on the current open/close status
    },
    [data],
  );

  return (
    <form onSubmit={onSubmit} className="issue-actions">
      <textarea
        className="issue-actions-text"
        onChange={onChange}
        value={commentText}
        placeholder={'Remod嵌套路由层次的页面usePreloadedQuery/继续传递useRefetchableFragment'}
        rows={4}
      />
      <button
        className="issue-actions-button"
        type="submit"
        disabled={ commentText.trim() === ''}
      >
        Comment
      </button>
      <button
        className="issue-actions-button"
        type="button"
        onClick={() => {
            if(!data)  throw Error("若是Report为空，refetch还有什么意思");
            refetch({id: data?.id}, {fetchPolicy: 'store-or-network'})
        }}
        disabled={false}
      >
       点击获取@refetchable新的{ data?.filesCount }水电费
      </button>
    </form>
  );
}
